<template>
    <div>
        <el-card shadow="never" :body-style="{ padding: '20px' }">
            <template #header>
                <div>
                    <h2>
                        校区设置
                    </h2>
                </div>
            </template>
            <el-form :model="formInline">
                <el-row :gutter="20">
                    <el-col :span="6" :offset="0">
                        <el-form-item label="校区名称">
                            <el-input v-model="formInline.schoolName" placeholder="请输入搜索校区名称" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="4" :offset="0">
                        <el-form-item>
                            <el-button type="primary" @click="onSubmit">查询</el-button>
                            <el-button type="success" @click="handleJump(1, undefined)">新增</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <el-divider />
            <el-table :data="tableData" stripe style="width: 100%" border :cell-style="{ textAlign: 'center' }"
                :header-cell-style="{ backgroundColor: '#f2f2f2', textAlign: 'center' }">
                <el-table-column label="校区名称" prop="schoolName" width="200" />
                <el-table-column label="类别" prop="category" width="200">
                    <template #default="scope">
                        <el-tag :type="scope.row.category == '主校区' ? '' : 'info'" effect="dark" class="ml-2">{{
                            scope.row.category }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="校区Logo" prop="logo" width="150">
                    <template #default="scope">
                        <el-image style="width: 50px; height: 50px;" :src="scope.row.logo" :zoom-rate="1.2"
                            :preview-src-list="[scope.row.photo]" :initial-index="100" fit="cover"
                            :preview-teleported='true' />
                    </template>
                </el-table-column>
                <el-table-column label="开启" prop="isopen" width="180">
                    <template #default="scope">
                        <el-switch :model-value="scope.row.isopen == '开启'" :active-value="true" :inactive-value="false"
                            @change="" />
                    </template>
                </el-table-column>
                <el-table-column label="校区学员" prop="number" width="150" />
                <el-table-column label="操作" fixed="right" width="200">
                    <template #default="scope">
                        <el-button type="primary" size="small" @click="handleJump(2, scope.row)">编辑</el-button>
                        <el-button type="warning" size="small">场地</el-button>
                        <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
                <template #empty>
                    <el-empty description="暂无校区" />
                </template>
            </el-table>
            <el-dialog v-model="dialogFormVisible" :title="num == 1 ? '添加校区' : '修改校区'" draggable>
                <SchoolForm :num="num" :SchoolInfo="SchoolInfo" v-if="dialogFormVisible" v-model="dialogFormVisible" />
            </el-dialog>

            <div class="pagination" v-if="tableData.length">
                <el-pagination :page-sizes="[5, 10, 20, 40]" layout="total, sizes, prev, pager, next, jumper" :total="total"
                    @size-change="handleSizeChange" @current-change="handleCurrentChange" :default-page-size="5" />
            </div>
        </el-card>

    </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { cloneDeep } from 'lodash';
import { ElMessage, ElMessageBox } from 'element-plus';
import { SchoolGet } from '../../api/dapao-school';
import SchoolForm from './components/school-form.vue';
import { SchoolType } from '../../types/dapao-school';

// 分页总数
const total = ref<number>(0)
const Pagesize = ref<number>(5)
// 控制
const dialogFormVisible = ref(false)

const formInline = reactive({
    schoolName: '',
})
const tableData = ref<SchoolType[]>([])
// 获取后端数据
let res = await SchoolGet(1, 5, formInline)
tableData.value = res.data.results
total.value = res.data.count
// 
const onSubmit = async () => {
    let obj = cloneDeep(formInline)
    let res = await SchoolGet(1, Pagesize.value, obj)
    tableData.value = res.data.results
    total.value = res.data.count
}


// 分页

// 一页显示多少条
const handleSizeChange = async (val: number) => {
    // console.log(val);
    let obj = cloneDeep(formInline)
    let res = await SchoolGet(1, val, obj)
    tableData.value = res.data.results
    total.value = res.data.count
    Pagesize.value = val
}
// 点击分页
const handleCurrentChange = async (val: number) => {
    // console.log(val);
    let obj = cloneDeep(formInline)
    let res = await SchoolGet(val, Pagesize.value, obj)
    tableData.value = res.data.results
    total.value = res.data.count
}

//传给组件的数据
let SchoolInfo = reactive({}) as SchoolType | undefined
// 控制弹窗
const num = ref<number>(1)
const handleJump = (n: number, val: SchoolType | undefined) => {
    dialogFormVisible.value = true
    num.value = n
    SchoolInfo = val
}

// 删除数据
const handleDel = (i: number, val: SchoolType) => {
    console.log(i, val);

    ElMessageBox.confirm(
        '你确定要悄悄删除维修记录吗?',
        '警告提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error',
        }
    )
        .then(async () => {
            ElMessage({
                type: 'success',
                message: '删除成功,快跑',
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '怂*,  点了不敢删',
            })
        })

}
</script>

<style scoped lang="scss">
div {
    color: #666;
}

h2 {
    color: #666;
    font-weight: bold;
    padding-left: 15px;
    border-left: 4px solid #00aeff;
    margin-bottom: 10px;
}

.pagination {
    margin-top: 15px;

}
</style>